<template>
	<view class="container">
		<view v-if="empty===true" class="empty">
			<image src="../../../../static/images/jewel/no-car.png" mode="aspectFit"></image>
			<view class="empty-tips">购物车是空的哦~</view>
		</view>
		<view v-else>
			<view class="handle-head">
				<text class="left">共{{prodCount}}件宝贝</text>
				<view class="right" @tap="handle('manage')">{{toggle?'管理':'完成'}}</view>
			</view>
			<view>
				<!-- 列表 -->
				<view class="cart-list">
					<block v-for="(item, index) in cartList" :key="index">
						<view class="cart-item">
							<view class="prod-img">
								<view class="yticon icon-xuanzhong2 checkbox" :class="{checked: item.checked}" @click="check('item', index)"></view>
								<image :src="item.photo" :class="[item.loaded]" mode="aspectFill"></image>
							</view>
							<view class="prod-info">
								<view class="name f-two-ellipsis">{{item.goods_name}}</view>
								<view class="info">
									<view class="price"><text class="rmb">￥</text><text class="num">{{item.shop_price||0}}</text></view>
									<view class="product-param-val-wrap">
										<uni-number-box 
											class="step"
											:min="1"
											:index="index"
											:value="item.buy_num"
											@eventChange="numberChange"
										></uni-number-box>
									</view>
								</view>
								<view class="pram">{{item.item_names}}</view>
							</view>
							
							<text class="del-btn yticon icon-fork" @click="deleteCartItem(index)"></text>
						</view>
					</block>
				</view>
				<!-- 底部菜单栏 -->
				<view class="footer">
					<view class="allSelect" @click="check('all')">
						<image :src="allChecked?'../../../../static/icons/jewel/car_select.png':'../../../../static/icons/jewel/car_unselect.png'" mode="aspectFit"></image>
						<text>全选</text>
					</view>
					<view class="price" v-if="toggle">
						<view><text>合计:</text><text class="num">￥{{total}}</text></view>
						<button class="pay-btn"  @click="createOrder">去结算</button>
					</view>
					<view class="price" v-if="!toggle">
						<button class="pay-btn" @click="deleteCartItem()">删除</button>
					</view>
				</view>
				
			</view>
		</view>
		<view class="m-full-loading" v-if="showLoading">
		    <image src="../../../../static/images/loading.gif" mode="widthFix"></image>
		</view>
		<tabbar :route_key="route_key"></tabbar>
	</view>
</template>
<script>
	import henglang from '@/common/common_zb.js';
	import uniNumberBox from '@/components/uni-number-box.vue';
	import tabbar from '@/components/ctabbar.vue';
	export default {
		components: {
			uniNumberBox,
			tabbar
		},
		data() {
			return {
				total: 0, //总价格
				allChecked: false, //全选状态  true|false
				cartList: [],
				prodCount:0,
				toggle:true,
				empty:false,
				showLoading: false,
				route_key: '1'
			};
		},
		onLoad(){
			this.loadData();
		},
		methods: {
			//请求数据
			loadData(){
				let that = this
				that.showLoading = true
				henglang.get('pick/cart_index', {}, true, function(res){
					that.cartList = res.data.data
					that.prodCount = Object.keys(that.cartList).length;
					if(that.prodCount != 0){
						for(var i in that.cartList){
							that.cartList[i]['checked'] = false
						}
						that.calcTotal(that.cartList);  //计算总价
					}else{
						that.empty = true
					}
				})
				that.showLoading = false
			},
			navToLogin(){
				uni.navigateTo({
					url: '/pages/public/login'
				})
			},
			 //选中状态处理
			check(type, index){
				if(type === 'item'){
					this.cartList[index].checked = !this.cartList[index].checked;
				}else{
					const checked = !this.allChecked
					const list = this.cartList;
					for(let i in list){
						list[i].checked = checked
					}
					this.allChecked = checked;
				}
				this.calcTotal(type);
			},
			//数量
			numberChange(data){
				let that = this
				henglang.get('pick/modify_cart', {key:data.index,number:data.number}, true, function(res){
					that.cartList[data.index].buy_num = data.number;
					that.calcTotal();
				})
				
			},
			//删除
			deleteCartItem(){
				let list = this.cartList;
				for(var i in list){
					if(list[i].checked == true){
						delete list[i]
						henglang.get('pick/delete_cart', {key:i}, true, function(res){
							henglang.showToast(res.data.msg,500)
						})
					}
				}
				this.prodCount = Object.keys(list).length
				if(this.prodCount === 0){
					this.empty = true
				}
				this.calcTotal();
			},
			//清空
			clearCart(){
				uni.showModal({
					content: '清空购物车？',
					success: (e)=>{
						if(e.confirm){
							this.cartList = {};
						}
					}
				})
			},
			//计算总价
			calcTotal(data){
				let list = this.cartList;
				let total = 0;
				let checked = true;
				for(let i in list){
					if(list[i].checked === true){
						total += Number(list[i].shop_price) * list[i].buy_num;
					}else if(checked === true){
						checked = false;
					}
				}
				this.allChecked = checked;
				this.total = Number(total.toFixed(2));
			},
			//创建订单
			createOrder(){
				let list = this.cartList;
				let goodsData = [];
				for(let i in list){
					if(list[i].checked === true){
						goodsData.push(i)
					}
				}
				if(goodsData.length === 0){
					henglang.showToast('请选择宝贝！')
					return;
				}
				henglang.post('pick/buildToOrderInfo', {key: goodsData}, true, function (res){
					uni.navigateTo({
						url: '/pages/jewel/agent/order/orderinfo'
					})
				})
			},
			handle(type){
				this.toggle = !this.toggle
			}
		}
	}
</script>

<style lang='scss'>
	@font-face {
		font-family: yticon;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_1078604_w4kpxh0rafi.ttf') format('truetype');
	}
	
	.yticon {
		font-family: "yticon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.icon-xuanzhong2:before {
		content: "\e62f";
	}
	
	page{
		background: #e5e5e5;
	}
	.container{
		padding-bottom: 108upx;
		.empty{
			position:fixed;
			left: 0;
			top:0;
			width: 100%;
			height: 100vh;
			background: #f4f4f4;
			display:flex;
			justify-content: center;
			flex-direction: column;
			align-items:center;
			background: #fff;
			image{
				width: 316upx;
				height: 319upx;
				margin-bottom:30upx;
			}
			.empty-tips{
				font-size: 38upx;
				color: #989898;
			}
		}
	}
	.handle-head{
		background: #FFFFFF;
		height: 63upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 63upx;
		border-top: 1px solid #d0d1d2;
		border-bottom: 1px solid #d0d1d2;
		padding: 0 35upx;
	}
	.handle-head .left{
		color: #fe6361;
		font-size: 30upx;
	}
	.handle-head .right{
		color: #999999;
		font-size: 30upx;
	}
	/* 购物车列表项 */
	.cart-item{
		display:flex;
		position:relative;
		padding: 30upx 0;
		background: #ffffff;
		.prod-img{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			image{
				width: 180upx;
				height: 180upx;
			}
			.checkbox{
				font-size: 50upx;
				line-height: 1;
				padding: 4upx;
				color: #C0C4CC;
				background:#fff;
				border-radius: 50px;
				display: block;
				margin: 0 25upx;
			}
		}
		.prod-info{
			width: 430upx;
			margin-left: 15upx;
			.name{
				font-size: 30upx;
				line-height: 40upx;
				height: 80upx;
			}
			.price{
				display: flex;
				align-items: center;
				.rmb{
					color: #fd6361;
					font-size: 20upx;
					margin-top: 10upx;
				}
				.num{
					color: #fd6361;
					font-size: 36upx;
					margin-right: 20upx;
				}
			}
			.info{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 8upx 0;
			}
			.pram{
				color: #999999;
				font-size: 20upx;
			}
		}
		.product-count{
			position: relative;
			display: flex;
			align-items: center;
		}
		.uni-numbox-minus,
		.uni-numbox-plus {
			border-radius: 100upx;
			background: #fe6361;
			width: 50upx;
			height: 50upx;
		}
		.uni-numbox,.uni-numbox-value {
			background:#ffffff;
			color: #fe6361;
		}
		.product-param-val-wrap {
			position: relative;
			width: 178upx;
			height: 50upx;
			border-radius: 50px;
			border: 1px solid #fe6361;
			overflow: hidden;
			border-right: 0;
			border-left: 0;
		}
		.del-btn{
			padding:4upx 10upx;
			font-size:34upx; 
			height: 50upx;
			color: #909399;
		}
	}
	/* 底部栏 */
	.footer{
		position: fixed;
		bottom: 128upx;
		width: 100%;
		left: 0;
		background: #FFFFFF;
		height: 108upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		z-index: 10;
	}
	.footer .allSelect{
		font-size: 30upx;
		color: #939393;
		display: flex;
		align-items: center;
	}
	.footer .allSelect image{
		width: 50upx;
		height: 50upx;
		margin: 0 24upx;
	}
	.footer .price{
		font-size: 30upx;
		color: #939393;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.footer .num{
		font-size: 36upx;
		color: #fd6361;
	}
	.footer .pay-btn{
		background: #fd6361;
		width: 260upx;
		height: 100%;
		line-height: 108upx;
		color: #ffffff;
		font-size: 36upx;
		margin-left: 40upx;
		position: relative;
		z-index: 40;
	}
	/* 复选框选中状态 */
	.action-section .checkbox.checked,
	.cart-item .checkbox.checked{
		color: #d71311;
	}
</style>
